{"componentChunkName":"component---src-templates-post-tsx","path":"/babel/","result":{"data":{"markdownRemark":{"html":"\n
\n

Babel이란?

\n

Babel은 JavaScript 컴파일러이다.\n즉, 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환하는 트랜스파일러라고 보면 된다.

\n
// ES6 화살표 함수와 ES7 지수 연산자\n[1, 2, 3].map((n) => n ** n);
\n

Babel은 위와 같은 코드를 아래와 같이 변환한다.

\n
// ES5\n('use strict');\n\n[1, 2, 3].map(function (n) {\n  return Math.pow(n, n);\n});
\n
\n

Babel 사용해보기

\n

1. 사용하기 전 준비

\n
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env
\n

설치가 완료되었으면 프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 작성한다.

\n
// 지금 설치한 @babel/preset-env를 사용하겠다는 의미이다.\n{\n  \"presets\": [\"@babel/preset-env\"]\n}
\n

2. @babel/preset-env는 뭐지?

\n

@babel/preset-env는 필요한 플러그인들을 프로젝트 지원 환경에 맞춰서 동적으로 결정해준다.
\n즉, 함께 사용되어야하는 Babel 플러그인을 모아 둔 것이다.
\n이를 Babel 프리셋이라고 부르며, Babel이 제공하는 공식 Babel 프리셋은 아래와 같다.

\n\n

3. npm script를 사용해 트랜스파일링 하기

\n
// package.json 파일에 build를 추가한다.\n{\n  \"name\": \"es6-project\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"babel src/js -w -d dist/js\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.7.0\",\n    \"@babel/core\": \"^7.7.2\",\n    \"@babel/preset-env\": \"^7.7.1\"\n  }\n}
\n\n
\n

Reference

\n","excerpt":"Babel이란? Babel 사용해보기 Babel이란? Babel은 JavaScript 컴파일러이다.\n즉, 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환하는 트랜스파일러라고 보면 된다. Babel은 위와…","tableOfContents":"","fields":{"slug":"/babel/"},"frontmatter":{"title":"Babel","date":"Aug 10, 2020","tags":["JavaScript","ES6"],"keywords":["babel","es6","javascript"],"update":"Jan 01, 0001"}}},"pageContext":{"slug":"/babel/","series":[],"lastmod":"2020-08-10"}},"staticQueryHashes":["2027115977","694178885"]}